<template>
  <div class="item-content selectUser">
    <el-select
      ref="select"
      v-model="resulte"
      v-loadmore="loadMoreList"
      :style="{'width':width || '100%'}"
      filterable
      remote
      value-key="advertiser_id"
      :remote-method="remoteMethod"
      :placeholder="placeholder"
      clearable
      :reserve-keyword="reserve === false ? false : true"
      :multiple="multiple?true:false"
      collapse-tags
      :loading="loading"
      @focus="mobileClear"
      @hook:mounted="mobileClear"
      @visible-change="mobileClear"
      @change="selectChange"
    >
      <el-option
        v-for="(item,index) in searchUserOption"
        :key="index"
        :disabled="(item.is_exist && item.is_exist === 1 && isDisabled) || (isDisabled && disabled_id && item.value == disabled_id) ? true : false"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { commonData } from '@/api/common'
import { mapActions } from 'vuex'
export default {
  // uid 默认选择的uid corpId 是为了区分工作台筛选用的的时候 根据不同主体传入不同的corp_id  userid 工作台搜索的时候需要传入当前的客服号 isDisabled 是否禁用 activity_type 充值活动区分类型
  props: ['placeholder', 'label', 'width', 'media_id', 'type', 'multiple', 'isResize', 'isDisabled', 'defaultValue', 'activity_type', 'disabled_id', 'reserve', 'autoreset', 'isShow'],
  data() {
    return {
      loading: false,
      noMore: false,
      searchUserOption: [],
      allSearchUserOption: [],
      pageInfo: {
        page: 1,
        page_size: 200,
        total: 0
      },
      resulte: '',
      inputValue: ''
    }
  },
  watch: {
    defaultValue(newVal) {
      if (newVal) {
        this.resulte = this.defaultValue
      } else {
      }
    },
    // 监听是否重置
    isResize(newVal, oldVal) {
      if (newVal) {
        this.multiple ? (this.resulte = []) : (this.resulte = '')
        this.searchUserOption = this.allSearchUserOption = []
        this.inputValue = ''
        this.requestAccountList('')
        this.pageInfo = {
          page: 1,
          page_size: 20,
          total: 0
        }
      }
    }
  },
  mounted() {
    this.multiple ? (this.resulte = []) : (this.resulte = '')
    this.requestAccountList('')
    this.defaultValue ? (this.resulte = this.defaultValue) : (this.resulte = '')
  },
  methods: {
    ...mapActions('common', ['requestCommonData']),
    loadMoreList() {
      console.log(this.noMore, '1')
      this.pageInfo.page++
      if (!this.noMore) {
        this.requestAccountList()
      } else {
        console.log('没有更新数据了')
      }
    },
    // 执行这个重新获取焦点的方法 就可以了
    mobileClear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { select } = this.$refs
            const input = select.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    selectChange(value) {
      console.log(value)
      this.$emit('result', value)
    },
    requestAccountList() {
      let data = {}
      if (this.type === 'advertiserList') {
        data = {
          value: this.inputValue,
          ...this.pageInfo,
          type: this.type,
          mini_app_id: window.localStorage.getItem('mini_app_id'),
          media: this.media_id || ''
        }
      } else if (this.type == 'activity') {
        data = {
          type: this.type,
          value: this.inputValue,
          mini_app_id: window.localStorage.getItem('mini_app_id'),
          activity_type: this.activity_type
        }
      } else {
        data = {
          value: this.inputValue,
          ...this.pageInfo,
          type: this.type,
          mini_app_id: window.localStorage.getItem('mini_app_id')
        }
      }
      console.log(this.type)
      console.log((this.type === 'playlet' || this.type === 'mainPlaylet' || this.type === 'versionPlaylet') && !this.isShow, '>>>>>>>>>>>>isShow')
      this.requestCommonData(data).then((res) => {
        this.loading = false
        let list = []
        if (res && res.length > 0) {
          if (this.type === 'advertiserList') {
            list = res.map((item) => {
              return {
                label: item.advertiser_name,
                value: item
              }
            })
          } else if (this.type === 'activity') {
            list = res.map((item) => {
              return {
                label: item.name + '/' + item.id,
                value: Number(item.id)
              }
            })
          } else if ((this.type === 'playlet' || this.type === 'mainPlaylet' || this.type === 'versionPlaylet') && !this.isShow) {
            list = res.filter((item) => {
              return item.is_show == 1 || window.localStorage.getItem('mini_app_id') == ''
            })
          } else {
            list = res
          }
        }
        this.searchUserOption = this.searchUserOption.concat(list)
        // 保存未搜索的时候的数据
        if (data.value === '') {
          this.allSearchUserOption = this.searchUserOption
        }
        this.$forceUpdate()
        this.noMore = true
      })
      // commonData(data).then((res) => {
      //   this.loading = false
      //   let list = []
      //   if (this.type == 'advertiserList') {
      //     list = res.data.data.map(item => {
      //       return {
      //         label: item.advertiser_name,
      //         value: item
      //       }
      //     })
      //   } else {
      //     list = res.data.data
      //   }

      //   this.searchUserOption = this.searchUserOption.concat(list)
      //   // 保存未搜索的时候的数据
      //   if (data.value === '') {
      //     this.allSearchUserOption = this.searchUserOption
      //   }
      //   this.$forceUpdate()
      //   this.noMore = true
      //   // 先暂时不分页
      //   // if (res.data.data.length === 0) {
      //   //   this.noMore = true
      //   // } else {
      //   //   this.noMore = false
      //   //   // this.pageInfo = res.data.page_info
      //   // }
      // })
    },

    // 删选过滤
    remoteMethod(query) {
      this.pageInfo = {
        page: 1,
        page_size: 20,
        total: 0
      }
      this.inputValue = query.trim()
      if (this.inputValue !== '') {
        this.searchUserOption = []
        this.pageInfo.page = 1
        this.loading = true
        this.noMore = false
        this.requestAccountList()
      } else {
        console.log(this.searchUserOption, this.resulte, '>>>>>>>>>>>this.searchUserOption')
        if (this.autoreset) {
          return
        } else {
          this.searchUserOption = []
          this.pageInfo.page = 1
          console.log(this.autoreset, '>>>>>>>>>>this.autoreset')
          this.loading = true
          this.noMore = false
          setTimeout(() => {
            this.loading = false
            this.searchUserOption = this.allSearchUserOption
          }, 200)
        }
      }
    }
  }
}
</script>

  <style lang="scss" scoped>
.selectItem {
  height: 50px;
}
.infoSpan {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  max-width: 250px;
  height: 50px;
  p {
    font-size: 12px;
    max-width: 100%;
    line-height: 20px;
  }
  span {
    color: #ffa81d;
  }
}
.tableImage {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  margin-right: 10px;
}
</style>
